<template>
  <div>
    <base-page ref="basePage" :basepage="basePage">
      <div slot="insertAndEdit">
        请输入简介
        <el-input type="textarea" v-model="introduction" />

        <el-upload
          class="upload-demo"
          action="/api/fileUtils/upload"
          :limit="1"
          :on-exceed="handleExceed"
          :on-success="uploadSuccess"
          :on-error="uploadError"
          :file-list="fileList"
          list-type="picture"
        >
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">请上传一张标题图片(只能上传jpg/png文件)</div>
        </el-upload>
        <Editor ref="editor" v-model="content" />
      </div>
    </base-page>
    <!-- 预览 -->
    <template>
      <el-dialog
        v-dialogDrag
        :visible.sync="previewVisible"
        width="100%"
        append-to-body
        center
        title="预览"
      >
        <div v-html="notice" class="preview"></div>
      </el-dialog>
    </template>
  </div>
</template>
<script>
import BasePage from "../BasePage.vue";
import Editor from "../../Editor.vue";
export default {
  components: {
    "base-page": BasePage,
    // "Editor":Editor,
  },
  data() {
    return {
      basePage: {
        // URL
        url: "noticeOperation",
        // 查询条件
        searchConf: [
          [
            {
              title: "公告标题",
              type: "input",
              prop: "noticeTitle",
            },
          ],
        ],
        buttonConf: {
          insertShow: true,
          deleteShow: true,
        },
        // table列
        tableColumnConf: {
          columns: [
            { prop: "noticeTitle", label: "公告标题" },
            { prop: "introduction", label: "公告简介" },
            { prop: "readNum", label: "阅读数量" },
            { prop: "createName", label: "创建人" },
            { prop: "createTime", label: "创建时间" },
          ],
          operation: {
            detail: false,
            alter: false,
            state: true,
            defs: [
              {
                name: "预览",
                event: "preview",
              },
            ],
          },
        },
        detailConf: {
          title: "公告信息",
          data: [],
        },
        // 新增修改form表单设置
        formConf: {
          formData: {},
          width: "70%",
          title: "公告",
          data: [
            {
              title: "公告标题",
              type: "input",
              prop: "noticeTitle",
            },
            {
              title: "公告类型",
              type: "select",
              prop: "type",
              data: [
                { value: "1", label: "作者" },
                { value: "0", label: "读者" },
              ],
            },
          ],
          rules: {},
        },
      },
      fileList: [],
      titlePic: "",
      introduction: "",
      content: "",
      previewVisible: false,
      notice: "",
    };
  },
  methods: {
    uploadSuccess(res, file) {
      if (res.result == "SUCCESS") {
        this.titlePic = res.detail;
      } else {
        this.$message.error("图片插入失败");
      }
    },
    uploadError() {
      this.$message.error("图片插入失败");
    },
    handleExceed(files, fileList) {
      this.$message.warning("当前限制选择 1 个文件");
    },
    event(event, val) {
      switch (event) {
        case "insert": {
          var formData = this.$refs.basePage.getFormData();
          formData.introduction = this.introduction;
          formData.content = this.content;
          formData.titlePic = this.titlePic;
          debugger;
          break;
        }
      }
    },
    selectChange(type, pro, value) {},
    operation(row, event) {
      switch (event) {
        case "preview": {
          // 获取html界面
          this.COMMON.httpPost(
            this,
            "noticeOperation/getNotice",
            {id:row.id},
            (result) => {
              if (result.result === "SUCCESS") {
                this.notice = result.data;
                this.previewVisible = true;
              }
            },
            (result) => {}
          );
          break;
        }
      }
    },
    formatter(data, prop, index) {
      switch (prop) {
        default: {
          return data;
        }
      }
    },
  },
  activated: function () {},
};
</script>
<style>
.upload-demo {
  border: 1px solid #00f;
  padding-top: 25px;
  padding-bottom: 25px;
  padding-right: 50px;
  padding-left: 50px;
  margin-top: 10px;
}
.preview{
  margin: 100px;
}
</style>